<template>
  <div>
    <headerNav></headerNav>
    <div class="ParkCenter">
      <div class="policyNotice_Nav">
        <p>
          <span @click="$router.push('/')">首页</span>>
          <span>园区中心</span>
        </p>
      </div>
      <div class="ParkCenter_top">
        <div class="ParkCenter_top_region">
          <!-- 省 -->
          <div class="region_content" v-if="provincialIndex == -1">
            <div class="region_content_left">
              <span>地区：</span>
            </div>
            <ul class="region_content_content">
              <li :class="provincialIndex == -1 ? 'active' : ''" @click="provincialSwitch(-1)">全部</li>
              <li
                v-for="(item, index) in regionData"
                @click="provincialSwitch(index)"
                :class="provincialIndex == index ? 'active' : ''"
                :key="index"
              >{{ item.province }}</li>
            </ul>
          </div>
          <div class="region_content" v-if="provincialIndex != -1">
            <div class="region_content_left">
              <span>地区：</span>
            </div>
            <ul class="region_content_content">
              <li class="active active1">
                {{ regionData[provincialIndex].province }}
                <img
                  src="../../../static/image/region_cha.png"
                  v-show="isShowError"
                  @click="provincialSwitch(-1)"
                />
              </li>
            </ul>
          </div>
          <!-- 市 -->
          <div class="region_content" v-if="provincialIndex != -1 && cityIndex == -1">
            <div class="region_content_left">
              <span></span>
            </div>
            <ul class="region_content_content">
              <li :class="cityIndex == -1 ? 'active' : ''" @click="citySwitch(-1)">全部</li>
              <li
                v-for="(item, index) in regionData[provincialIndex].city"
                @click="citySwitch(index)"
                :class="cityIndex == index ? 'active' : ''"
                :key="index"
              >{{ item.name }}</li>
            </ul>
          </div>
          <div class="region_content" v-if="cityIndex != -1">
            <div class="region_content_left">
              <span></span>
            </div>
            <ul class="region_content_content">
              <li class="active active1">
                {{ regionData[provincialIndex].city[cityIndex].name }}
                <img
                  src="../../../static/image/region_cha.png"
                  v-show="isShowError"
                  @click="citySwitch(-1)"
                />
              </li>
            </ul>
          </div>
          <!-- 区 -->
          <div class="region_content" v-if="cityIndex != -1">
            <div class="region_content_left">
              <span></span>
            </div>
            <ul class="region_content_content">
              <li :class="areaIndex == -1 ? 'active' : ''" @click="areaSwitch(-1)">全部</li>
              <li
                v-for="(item, index) in regionData[provincialIndex].city[
                cityIndex
              ].area"
                @click="areaSwitch(index)"
                :class="areaIndex == index ? 'active' : ''"
                :key="index"
              >{{ item }}</li>
            </ul>
          </div>
        </div>
        <div class="ParkCenter_top_keyword">
          <div class="keyword_left">
            <span>关键字：</span>
          </div>
          <div class="keyword_right">
            <input type="text" placeholder="输入关键词" ref="keywordInput" />
            <span @click="parkList(1)">搜索</span>
          </div>
        </div>
      </div>
      <div class="ParkCenter_title">
        <div class="ParkCenter_title_left">
          已为你找到
          <span>{{ parkData.total }}</span>个园区
        </div>
        <div class="ParkCenter_title_content">
          <el-dropdown trigger="click">
            <span class="el-dropdown-link">{{ defaultSortValue }}</span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click.native="defaultSort('默认排序')">默认排序</el-dropdown-item>
                <el-dropdown-item @click.native="defaultSort('企业数量从多到少')">企业数量从多到少</el-dropdown-item>
                <el-dropdown-item @click.native="defaultSort('企业数量从少到多')">企业数量从少到多</el-dropdown-item>
                <el-dropdown-item @click.native="defaultSort('占地面积从大到小')">占地面积从大到小</el-dropdown-item>
                <el-dropdown-item @click.native="defaultSort('占地面积从小到大')">占地面积从小到大</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <div class="ParkCenter_content">
        <div
          class="ParkCenter_content_content"
          v-for="(item, index) in parkData.records"
          :key="index"
        >
          <div class="ParkCenter_content_content_top">
            <h3 @click="noticeDetails(item.sysOrgCode)" v-html="searchHighlight(item.name)"></h3>
          </div>
          <div class="ParkCenter_content_content_bottom">
            <div class="ParkCenter_content_content_bottom_province" v-if="item.prov != null">
              <span>省份：{{ item.prov }}</span>
            </div>
            <div class="ParkCenter_content_content_bottom_province" v-if="item.city != null">
              <span>城市：{{ item.city }}</span>
            </div>
            <div class="ParkCenter_content_content_bottom_province" v-if="item.area != null">
              <span>地区：{{ item.area }}</span>
            </div>
            <div class="ParkCenter_content_content_bottom_province" v-if="item.areaCovered != null">
              <span>占地面积：{{ item.areaCovered }}亩</span>
            </div>
            <div class="ParkCenter_content_content_bottom_province" v-if="item.existComps != null">
              <span>
                企业数：
                <span class="span">{{ item.existComps }}</span>家
              </span>
            </div>
          </div>
        </div>
      </div>
      <div class="ParkCenter_bottom">
        <paging ref="paging_zi" v-on:CurrentPage="accept_CurrentValue"></paging>
      </div>
    </div>
    <navigation></navigation>
    <footerNav></footerNav>
  </div>
</template>

<script>
import paging from "../../components/paging.vue"; //分页
import { commonRequest } from "../../api/api.js";
import { sessionTake } from "../../util/validate.js";
export default {
  name: "ParkCenter",
  components: {
    paging
  },
  head() {
    return {
      title: "园区中心-比目镜",
      meta: [
        { hid: "keywords", name: "keywords", content: "园区中心" },
        {
          hid: "description",
          name: "description",
          content: "各个地区的园区中心"
        }
      ]
    };
  },
  data() {
    return {
      // 地区
      regionData: [],
      // 省级选中
      provincialIndex: -1,
      // 市级选中
      cityIndex: -1,
      // 区级选中
      areaIndex: -1,
      // 园区
      parkData: [],
      // 当前页
      pageIndex: 1,
      // 关键字
      keywordValue: "",
      // 默认排序值
      defaultSortValue: "默认排序"
    };
  },
  computed: {
    isShowError() {
      let params = this.$store.state.cityInfo;
      if (params.city === "" && params.province === "") {
        return true;
      } else {
        return false;
      }
    }
  },
  mounted() {
    var that = this;
    if (sessionTake("provinceName") == null) {
      // 园区列表
      that.parkList();
    }
    // 获取地区
    commonRequest("/api/yuanQu/yuanQuInfo/getAllYuanQuArea").then(res => {
      that.regionData = res;
      if (sessionTake("provinceName") != null) {
        for (let i = 0; i < res.length; i++) {
          if (res[i].province == sessionTake("provinceName")) {
            that.provincialIndex = i;
            for (let q = 0; q < res[i].city.length; q++) {
              if (res[i].city[q].name == sessionTake("cityName")) {
                that.cityIndex = q;
                that.parkList();
                return;
              } else if (q + 1 == res[i].city.length) {
                that.parkList();
                return;
              }
            }
          } else if (i + 1 == res.length) {
            that.parkList();
            return;
          }
        }
      }
    });
  },
  methods: {
    // 排序
    defaultSort(value) {
      this.defaultSortValue = value;
      this.parkList();
    },
    // 搜索高亮
    searchHighlight(val) {
      var that = this;
      if (that.keywordValue == "") {
        return val;
      } else {
        return val.replace(
          new RegExp(that.keywordValue, "g"),
          "<em style='color: red;font-style:normal;'>" +
            that.keywordValue +
            "</em>"
        );
      }
    },
    // 接受当前选中页数
    accept_CurrentValue(value) {
      this.pageIndex = value;
      this.parkList();
    },
    // 省级切换
    provincialSwitch(index) {
      this.provincialIndex = index;
      this.cityIndex = -1;
      this.areaIndex = -1;
      this.parkList();
    },
    // 市级切换
    citySwitch(index) {
      this.cityIndex = index;
      this.areaIndex = -1;
      this.parkList();
    },
    // 区级切换
    areaSwitch(index) {
      this.areaIndex = index;
      this.parkList();
    },
    // 园区列表
    parkList(index) {
      var that = this;
      var provinceValue = "";
      var cityValue = "";
      var areaValue = "";
      var value = "";
      var sortStatusValue = "";
      var areaCoveredValue = "";
      var existCompsValue = "";
      if (that.defaultSortValue == "默认排序") {
        sortStatusValue = "";
        areaCoveredValue = "";
        existCompsValue = "";
      }
      if (that.defaultSortValue == "企业数量从多到少") {
        sortStatusValue = "1";
        areaCoveredValue = "";
        existCompsValue = "123";
      }
      if (that.defaultSortValue == "企业数量从少到多") {
        sortStatusValue = "0";
        areaCoveredValue = "";
        existCompsValue = "123";
      }
      if (that.defaultSortValue == "占地面积从大到小") {
        sortStatusValue = "1";
        areaCoveredValue = "123";
        existCompsValue = "";
      }
      if (that.defaultSortValue == "占地面积从小到大") {
        sortStatusValue = "0";
        areaCoveredValue = "123";
        existCompsValue = "";
      }
      if (that.$refs.keywordInput.value != "") {
        if (index == 1) {
          value = that.$refs.keywordInput.value;
          that.keywordValue = that.$refs.keywordInput.value;
        } else {
          value = that.keywordValue;
        }
      } else {
        that.keywordValue = "";
        value = "";
      }
      if (that.provincialIndex > -1) {
        provinceValue = that.regionData[that.provincialIndex].province;
      }
      if (that.cityIndex > -1) {
        cityValue =
          that.regionData[that.provincialIndex].city[that.cityIndex].name;
      }
      if (that.areaIndex > -1) {
        areaValue =
          that.regionData[that.provincialIndex].city[that.cityIndex].area[
            that.areaIndex
          ];
      }
      commonRequest("/api/yuanQu/yuanQuInfo/list", {
        prov: provinceValue,
        city: cityValue,
        area: areaValue,
        pageNo: that.pageIndex,
        name: value,
        sortStatus: sortStatusValue,
        areaCovered: areaCoveredValue,
        existComps: existCompsValue
      }).then(res => {
        that.$refs.paging_zi.totalValue(res.total);
        that.parkData = res;
      });
    },
    // 跳转园区详情
    noticeDetails(id) {
      window.open("/ParkCenter_details?id=" + id, "_blank");
      // this.$router.push({
      //   path: "/ParkCenter_details",
      //   query: {
      //     id: id,
      //   },
      // });
    }
  }
};
</script>

<style lang="less" scoped>
.ParkCenter {
  width: 1200px;
  margin: 0px auto;
  .ParkCenter_top {
    background-color: rgb(255, 255, 255);
    box-shadow: rgb(238, 238, 238) -1px 3px 6px;
    .ParkCenter_top_region {
      border-bottom: 1px solid rgb(242, 250, 255);
      padding: 18px 20px 12px;
      .region_content {
        overflow: hidden;
        margin-top: 12px;
        &:nth-child(1) {
          margin-top: 0;
        }
        .region_content_left {
          float: left;
          span {
            font-size: 14px;
            padding: 2px 6px;
            color: rgb(51, 51, 51);
          }
        }
        .region_content_content {
          margin-left: 82px;
          overflow: hidden;
          li {
            float: left;
            font-size: 14px;
            padding: 2px 6px;
            color: rgb(51, 51, 51);
            margin: 0px 25px 6px;
            cursor: pointer;
            position: relative;
            border-radius: 4px;
            &:hover {
              background-color: #44a2ff;
              color: #fff;
            }
          }
          .active {
            background-color: #44a2ff;
            color: #fff;
            position: relative;
            overflow: hidden;
            border-radius: 4px;
            img {
              width: 16px;
              position: absolute;
              right: -2px;
              top: -2px;
            }
          }
          .active1 {
            padding-right: 16px;
          }
        }
      }
    }
    .ParkCenter_top_keyword {
      padding: 18px 20px;
      overflow: hidden;
      .keyword_left {
        float: left;
        span {
          line-height: 32px;
          font-size: 14px;
          padding: 2px 6px;
          color: rgb(51, 51, 51);
        }
      }
      .keyword_right {
        margin-left: 107px;
        overflow: hidden;
        input {
          float: left;
          display: inline-block;
          width: 240px;
          height: 32px;
          background: rgb(255, 255, 255);
          border: 1px solid rgb(218, 234, 245);
          border-radius: 4px 0px 0px 4px;
          box-sizing: border-box;
          padding-left: 12px;
          &::-webkit-input-placeholder {
            color: #ccc;
          }
        }
        span {
          float: left;
          display: inline-block;
          box-sizing: border-box;
          width: 60px;
          height: 32px;
          line-height: 30px;
          background: rgb(68, 162, 255);
          border-radius: 0px 4px 4px 0px;
          text-align: center;
          margin-left: -1px;
          color: rgb(255, 255, 255);
          cursor: pointer;
        }
      }
    }
  }
  .ParkCenter_title {
    padding: 25px 0;
    overflow: hidden;
    .ParkCenter_title_left {
      float: left;
      line-height: 30px;
      font-size: 14px;
      color: #333;
      span {
        color: #44a2ff;
        font-size: 14px;
      }
    }
    .ParkCenter_title_content {
      float: left;
      margin-left: 20px;
      span {
        display: inline-block;
        padding: 0 6px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #ffffff;
        border: 1px solid #daeaf5;
        font-size: 14px;
        color: #44a2ff;
        border-radius: 4px;
        cursor: pointer;
        box-sizing: border-box;
      }
    }
  }
  .ParkCenter_content {
    .ParkCenter_content_content {
      padding: 18px 20px;
      border-bottom: 1px solid #daeaf5;
      transition: all 0.2s;
      &:hover {
        background-color: rgb(255, 255, 255);
        box-shadow: rgb(238, 238, 238) -1px 3px 6px;
      }
      .ParkCenter_content_content_top {
        margin-bottom: 10px;
        h3 {
          font-size: 18px;
          color: #333;
          font-weight: 700;
          cursor: pointer;
          &:hover {
            color: rgb(68, 162, 255);
          }
        }
      }
      .ParkCenter_content_content_bottom {
        overflow: hidden;
        .ParkCenter_content_content_bottom_province {
          float: left;
          margin-right: 40px;
          font-size: 14px;
          color: #999999;
          .span {
            font-size: 14px;
            color: #44a2ff;
            margin: 0 5px;
          }
        }
      }
    }
  }
  .ParkCenter_bottom {
    margin-top: 40px;
    margin-bottom: 60px;
    padding: 0 20px;
    text-align: right;
  }
}
</style>
